<template>
  <div id="app">
    <h1>睡过列表</h1>
    <p v-if="loading">loading...</p>
    <ul>
      <li v-if="!loading" v-for="(item,index) of fruitList" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
  
</template>

<style>
</style>
<script>
export default {
  data(){
    return{
      fruitList:[],
      loading:true,
    }
  },
  created(){
    this.getDate();
  },
  methods:{
    getDate(){
      //通过计时器，模拟一个ajax获取数据方法
      setTimeout(()=>{
        this.fruitList = ["香蕉","苹果","鸭梨"];
        this.loading = false;
      },2000)
    }
  }
}
</script>
